<template>
    <div class="upload" :style="{minHeight:h+'px'}">
        <div class="list">
            <div class="title">照片上传</div>
            <el-input v-model="input" @input="searchorder" placeholder="先输入外部订单号"></el-input>
            
            <div v-if="orderbl">
                
                <div class="orderli" v-if="!hasorder">目前订单不存在，确认订单正确后可继续上传，系统将在获取订单后自动匹配。</div>
                
                <div v-if="hasorder">
                    <div class="orderli">订单创建时间：{{order.created_at}}</div>
                    <div class="orderli">姓名：{{order.id_card_name}}<span style="margin-left: 10px;"> 身份证号：{{order.id_card_num}}</span></div>
                    <div class="orderli">订单状态：{{order.status_name}}</div>
                    <div class="orderli" v-if="reasonshow" style="color: #EEF7FF;">失败原因：{{reason}}</div>
                </div>
                <div v-if="noup">
                    <el-upload class="upload-demo" :on-preview="up" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :show-file-list="false" :on-change="uploadok1" :auto-upload="false">
                      <div class="upload-img"><img :src="src1"></div>
                    </el-upload>
                    
                    <div v-if="first">
                        <el-upload class="upload-demo" :on-preview="up" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :show-file-list="false" :on-change="uploadok2" :auto-upload="false">
                          <div class="upload-img"><img :src="src2"></div>
                        </el-upload>
                        
                        <el-upload class="upload-demo" :on-preview="up" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :show-file-list="false" :on-change="uploadok3" :auto-upload="false">
                          <div class="upload-img"><img :src="src3"></div>
                        </el-upload>
                        
                        <el-button type="primary" @click="seephotogo" size="medium">上传</el-button>
                        <el-button type="primary" @click="clear" size="medium">清空</el-button>
                    </div>
                    
                    
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script>
    import axios from "axios";

    export default{

    	name: 'upload',
    	data(){
    		return{
    			src1:"./static/img/card11.png",
                src2:"./static/img/card22.png",
                src3:"./static/img/card33.png",
                input:"",
                orderbl:false,
                order:{},
                hasorder:false,
                reason:"",
                noup:false,
                file:{
                    face:"",
                    back:"",
                    hand:""
                },
                first:false,
                reasonshow:false
    		}
    	},
    	created() {
    		//左边导航高度
    		var h = document.documentElement.clientHeight;
    		this.h = h;
    	},
        methods:{
            //查订单
            searchorder:function(){
                axios.get('/api/plan-market/order/details?source_id='+this.input)
                  .then(response => {
                        if(response.data.msg.code != 0){
                            //查订单失败
                            that.$message.error(response.data.msg.info);
                        }else{
                            this.first = true
                             //查订单成功 内容区域显示
                            this.orderbl = true
                            if(response.data.data.face != ""){this.src1=response.data.data.face}
                            if(response.data.data.back != ""){this.src2=response.data.data.back}
                            if(response.data.data.hand != ""){this.src3=response.data.data.hand}

                            if(response.data.data == ""){
                                //查订单成功 内容区域显示 没有订单 显示没有订单的信息
                                this.hasorder = false  
                                //查订单成功 内容区域显示 没有订单 显示没有订单的信息 显示face上传
                                this.noup = true                          
                            }else{
                                //查订单成功 内容区域显示 有订单 显示有订单的信息 显示face上传  是失败状态下面显示失败原因 没有就不显示
                                this.hasorder = true 
                                this.noup = true 
                                this.order = response.data.data
                                if(response.data.data.status_name == "开卡失败"){
                                    this.reason = response.data.data.reason + "上传照片后请前往重新提交照片"
                                    this.reasonshow = true
                                }
                                if(response.data.data.status_name == "代开卡" || response.data.data.status_name == "已领取" || response.data.data.status_name == "开卡中" || response.data.data.status_name == "待发货" || response.data.data.status_name == "已发货" || response.data.data.status_name == "已激活" || response.data.data.status_name == "激活且充值"){
                                    this.reason = response.data.data.reason + "订单已存在照片无法上传，如需上传请至订单页检索上传"
                                    this.noup = false 
                                    this.reasonshow = true
                                }
                                if(response.data.data.status_name == "已退货" || response.data.data.status_name == "订单终止"){
                                    this.reason = response.data.data.reason + "当前订单不支持快速上传，请至订单处理页面上传"
                                    this.noup = false 
                                    this.reasonshow = true
                                }
                                
                            }
                            
                        }
                  })  
            },
            seephotogo:function(){
                var that = this
                  //调取更改状态
                  axios.post('/api/plan-market/plan/photo/status', {outer_id:this.input})
                    .then(response => {
                        if(response.data.msg.code != 0){
                            that.$message.error(response.data.msg.info);
                        }else{
                            that.seephotolog = false
                            that.loading = true
                            that.$message({
                              message: '已更改订单状态',
                              type: 'success'
                            });
                        }
                    })  
            },
            
           up:function(file){
              console.log(file.url)
           },
           clear:function(){
               this.src1="./static/img/card11.png",
               this.src2="./static/img/card22.png",
               this.src3="./static/img/card33.png",
               this.input=""
               this.orderbl = false,
               this.order = {},
               this.hasorder = false,
               this.reason = ""

                this.noup = false,
                this.file={
                   face:"",
                   back:"",
                   hand:""
                },
               // this.first=false
               this.reasonshow = false
           },
           //单个图片上传
           uploadok1:function(file){
 
               // var reader = new FileReader()
               // var img = new Image();
               // reader.onload = function(e) {
               //      img.src = e.target.result;
               // };
               // var canvas = document.createElement('canvas');
               // var context = canvas.getContext('2d');
               //  // base64地址图片加载完毕后
               //  img.onload = function () {
               //      // 图片原始尺寸
               //      var originWidth = this.width;
               //      var originHeight = this.height;
               //      // 最大尺寸限制
               //      var maxWidth = 600, maxHeight = 600;
               //      // 目标尺寸
               //      var targetWidth = originWidth, targetHeight = originHeight;
               //      // 图片尺寸超过400x400的限制
               //      if (originWidth > maxWidth || originHeight > maxHeight) {
               //          if (originWidth / originHeight > maxWidth / maxHeight) {
               //              // 更宽，按照宽度限定尺寸
               //              targetWidth = maxWidth;
               //              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
               //          } else {
               //              targetHeight = maxHeight;
               //              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
               //          }
               //      }
               //      // canvas对图片进行缩放
               //      canvas.width = targetWidth;
               //      canvas.height = targetHeight;
               //      // 清除画布
               //      context.clearRect(0, 0, targetWidth, targetHeight);
               //      // 图片压缩
               //      context.drawImage(img, 0, 0, targetWidth, targetHeight);
               //      // canvas转为blob并上传
               //      canvas.toBlob(function (blob) {
               //          let imgSrc = window.URL.createObjectURL(blob)
               //      }, "image/jpeg", 0.8);
               //      };
               //  reader.readAsDataURL(file.raw);    
           	var that = this;
            this.file.face = file.raw
            if(this.input == ""){
                this.$message.error("请先输入外部订单编号");
                return false
            }
           	var formData = new FormData();
            formData.append("source_id",this.input);
           	formData.append("pic[face]", file.raw);
           	axios.post('/api/plan-market/order/photo/update',formData)
           		.then(response => {
                    if(response.data.msg.code == 0){
                        //百度识别失败
                        if(response.data.data.code == 1){
                            this.$confirm("照片系统自动识别失败，请核实订单身份证信息与照片一致后点击", '提示', {
                                  confirmButtonText: '继续上传',
                                  cancelButtonText: '取消',
                                  closeOnClickModal:false,
                                  type: 'warning'
                                }).then(() => {
                                    //继续上传，调原来接口
                                   var formData = new FormData();
                                   formData.append("outer_id",this.input);
                                   formData.append("share_id",this.$route.query.share_id);
                                   formData.append("pic[face]", this.file.face);
                                   axios.post('/api/plan-market/order-pic/upload/for-store',formData)
                                   	.then(response => {
                                           if(response.data.msg.code == 0){
                                                that.$message({
                                                  message: '上传成功！',
                                                  type: 'success'
                                                });
                                               var random = Math.random()
                                               that.src1 = response.data.data.face_url+"?v="+random
                                               that.first = true
                                           }else{
                                                that.$message.error(response.data.msg.info);
                                           }
                                   	})
                                })
                        }
                        //百度识别成功，但是订单不符合
                        if(response.data.data.code == 2){
                            this.$confirm(response.data.data.mes, '提示', {
                                  confirmButtonText: '覆盖',
                                  cancelButtonText: '取消',
                                  closeOnClickModal:false,
                                  type: 'warning'
                                }).then(() => {
                                    //继续上传，调原来接口
                                   var formData = new FormData();
                                   formData.append("outer_id",this.input);
                                   formData.append("new_id_num",response.data.data.baidu_num);
                                   formData.append("new_name",response.data.data.baidu_name);
                                   formData.append("share_id",this.$route.query.share_id);
                                   formData.append("pic[face]", this.file.face);
                                   axios.post('/api/plan-market/order-pic/upload/for-store',formData)
                                   	.then(response => {
                                           if(response.data.msg.code == 0){
                                                that.$message({
                                                  message: '上传成功！',
                                                  type: 'success'
                                                });
                                               var random = Math.random()
                                               that.src1 = response.data.data.face_url+"?v="+random
                                               
                                               // that.first = true
                                           }else{
                                                that.$message.error(response.data.msg.info);
                                           }
                                   	})
                                })
                        }
                        //百度识别成功，订单也符合
                        if(response.data.data.code == 3){
                            that.$message({
                              message: '上传成功！',
                              type: 'success'
                            });
                            var random = Math.random()
                            that.src1 = response.data.data.url+"?v="+random
                            // that.first = true
                        }
                        //没有订单 然后继续上传
                        if(response.data.data.code == 4){
                           //继续上传，调原来接口
                           var formData = new FormData();
                           formData.append("outer_id",this.input);
                           formData.append("share_id",this.$route.query.share_id);
                           formData.append("pic[face]", this.file.face);
                           axios.post('/api/plan-market/order-pic/upload/for-store',formData)
                           	.then(response => {
                                   if(response.data.msg.code == 0){
                                        that.$message({
                                          message: '上传成功！',
                                          type: 'success'
                                        });
                                       var random = Math.random()
                                       that.src1 = response.data.data.face_url+"?v="+random
                                       
                                       // that.first = true
                                   }else{
                                        that.$message.error(response.data.msg.info);
                                   }
                           	})
                        }
                    }else{
                    	that.$message.error(response.data.msg.info);
                    }
           		})
           },
           //单个图片上传
           uploadok2:function(file){
           	var that = this;
            if(this.input == ""){
                this.$message.error("请先输入外部订单编号");
                return false
            }
            this.file.back = file.raw
           	var formData = new FormData();
           	formData.append("outer_id",this.input);
           	formData.append("share_id",this.$route.query.share_id);
           	formData.append("pic[back]", file.raw);
           	axios.post('/api/plan-market/order-pic/upload/for-store',formData)
           		.then(response => {
                    if(response.data.msg.code == 0){
                    	that.$message({
                    	  message: '上传成功！',
                    	  type: 'success'
                    	});
                        var random = Math.random()
                        that.src2 = response.data.data.back_url+"?v="+random
                    }else{
                    	that.$message.error(response.data.msg.info);
                    }
           		})
           },
           //单个图片上传
           uploadok3:function(file){
           	var that = this;
            if(this.input == ""){
                this.$message.error("请先输入外部订单编号");
                return false
            }
            this.file.hand = file.raw
           	var formData = new FormData();
           	formData.append("outer_id",this.input);
           	formData.append("share_id",this.$route.query.share_id);
           	formData.append("pic[hand]", file.raw);
           	axios.post('/api/plan-market/order-pic/upload/for-store',formData)
           		.then(response => {
                    if(response.data.msg.code == 0){
                    	that.$message({
                    	  message: '上传成功！',
                    	  type: 'success'
                    	});
                        var random = Math.random()
                        that.src3 = response.data.data.hand_url+"?v="+random
                    }else{
                    	that.$message.error(response.data.msg.info);
                    }
           		})
           },
        }
    }
</script>

<style lang="scss" scoped>
    .upload{
        width: 100%; margin: 0 auto; margin: 0; padding: 0; background: #EFEFEF; height: 100%;
        .list{
            width: 400px; margin: 0 auto;
            .title{ line-height: 80px;}
            .el-input{ margin-bottom: 10px;}
            .el-upload-dragger{ width: 400px;}
            .upload-demo{ position: relative; margin-bottom: 30px;}
            .upload-img{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center;
                img{ max-height: 100%; max-width: 100%;}
            }
            
        }
        .orderli{ margin-bottom: 10px;}
    }
</style>
